{include file="common/header-top" /}

<style>
    .van-grid-item__text{
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .job-item{
        display: block;
        margin-top: 5px;
    }

    .job-item-a{
        color: #2f2d33;
    }

    .job-item .job-item-img-icon {
        margin-top: 28px;
        padding-left: 10px;
    }

    .job-item .job-item-title{
        margin: 8px 0px 5px 2px;
        color: #3c3c3c;
        text-overflow: ellipsis;
        font-size: 15px;
        font-weight: 600;
        -webkit-line-clamp: 2;
    }
    .job-item .job-item-icon{
        font-size: small;
    }
    .job-item .job-item-span{
        color: #949595;
        font-weight: 500;
        font-size: 12px;
        padding-left: 5px;
    }
    .job-item .job-item-span-unit{
        font-size: 14px;
        color: #fcc48d;
    }

    .job-item .job-item-money-div{
        margin-top: 45px;
        float: right;
        margin-right: 5px;
    }


    .job-item .van-cell{
        padding: 0;
    }

    .job-item .van-cell:not(:last-child)::after{
        border-bottom: 0;
    }


</style>


<div id='app' v-cloak>

    <van-nav-bar title="积分记录" left-arrow @click-left="goBack" left-text="返回">
    </van-nav-bar>


    <van-tabs v-model="currentTab" swipeable @click="changeTab">
        <van-tab title="全部" name="0"></van-tab>
        <van-tab title="获得记录" name="1"></van-tab>
        <van-tab title="消耗记录" name="2"></van-tab>
    </van-tabs>


    <!--岗位列表-->
    <van-row>
        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="getCreditsList"
        >
            <van-row v-for="item in creditsList" class="job-item">
                <a :href="'/index/Jobs/jobDetail?id=' + item.id" class="job-item-a" v-if="!item.is_deleted">
                    <van-col span="5">
                        <van-icon
                            :name="getIcon(item)"
                            class="job-item-img-icon" size="45px"
                        ></van-icon>
                    </van-col>

                    <van-col span="19">
                        <van-col span="24">
                            <h4 class="job-item-title" style="display: inline-block">
                                <div class="van-ellipsis">{{item.kindCh}}</div>
                            </h4>
                            <!--
                            <van-tag type="warning" mark style="float: right; margin-right: 5%;"></van-tag>
                            -->
                        </van-col>
                        <van-row>
                            <van-col span="24">
                                <van-cell
                                        icon="/__FRONT__/images/icon/wallet-jifen.png"
                                        :title="getCreditsTitle(item)"
                                        :value="item.credits + '分'"
                                >
                                </van-cell>
                                <van-cell
                                        icon="/__FRONT__/images/icon/publish-job-time.png"
                                        title="时间"
                                        :value="item.timeCh"
                                ></van-cell>
                            </van-col>
                        </van-row>
                    </van-col>

                    <van-col span="24">
                        <van-divider style="margin: 3px 0;"></van-divider>
                    </van-col>
                </a>
            </van-row>


        </van-list>
    </van-row>
    <!--岗位列表-->




    {include file="common/foot-bar" /}

</div>


<script>

    Vue.use(vant.Lazyload);


    var vm = new Vue({
        el: '#app',
        data() {
            return {
                active:3,
                userCenterIcon: {
                    normal: '/__FRONT__/images/icon/usercenter-n.png',
                    active: '/__FRONT__/images/icon/usercenter-a.png'
                },
                erShouIcon: {
                    normal: '/__FRONT__/images/icon/ershou-n.png',
                    active: '/__FRONT__/images/icon/ershou-a.png'
                },


                //当前列表类型
                currentType: '{$type}',
                currentTab: '{$type}',
                page: 1,
                pageSize: 8,


                //兼职列表集
                creditsList: [],
                loading: false,
                finished: false


            };
        },

        created(){
        },

        computed:{

        },

        methods:{
            //返回上一页
            goBack(){
                history.back();
            },
            //获取展示图标
            getIcon(item){
                if (item.type == 1) {
                    return '/__FRONT__/images/icon/jifen-add.png';
                }
                if (item.type == 2) {
                    return '/__FRONT__/images/icon/jifen-reduce.png';
                }

            },

            getCreditsTitle(item){
                if (item.type == 1) {
                    return '获得积分';
                }
                if (item.type == 2) {
                    return '消耗积分';
                }
            },

            //切换tab
            changeTab(name, title){
                this.currentType = name;
                this.creditsList = [];
                this.page = 1;
                this.pageSize = 8;
                this.loading = true;
                this.finished = false;
                this.getCreditsList();
            },
            //获取我发布的兼职
            getCreditsList(){
                var params = {
                    type: this.currentType,
                    page: this.page,
                    pageSize: this.pageSize
                };
                axiosRequest.get('/api/user/creditsList', {params:params}).then(function (response) {
                    if (response.code == 200) {
                        if (response.data) {
                            response.data.forEach(function (item) {
                                vm.$data.creditsList.push(item);
                            });
                            vm.$data.loading = false;
                            vm.$data.page += 1;

                            if (response.data.length < vm.$data.pageSize) {
                                vm.$data.finished = true;
                                vm.$data.loading = false;
                            }
                        } else {
                            vant.Toast('没有更多啦！');
                            vm.$data.finished = true;
                            vm.$data.loading = false;
                        }
                    } else {
                        vant.Toast('系统开小差啦！');
                    }
                });
            }


        }
    });

</script>

{include file="common/foot-bottom" /}
